<!--角色选择框-->
<template>
  <div class="transfer-records-wrap" v-show="showList" @click.stop>
    <div class="transfer-records-header">资产全视图详情 <a-button @click="firstGetData">刷新</a-button></div>
    <div class="transfer-records-main" ref="recordsMain">
      <div class="item-wrap">
        <template v-if="isLoading">
          <a-skeleton v-for="item in 20" :key="item" :paragraph="{ rows: 8 }" class="item" />
        </template>
        <div v-else class="item" v-for="item in dataSource" :key="item.id" @click="cardClick(item.id)">
          <div class="item-header">
            <div class="nowrap-text" :title="item.name">{{ item.name }}</div>
          </div>
          <div class="data-wrap">
            <div class="data-item">
              <span class="label">资产状态:</span>
              <span class="value nowrap-text" :title="item.cartegory_dictText">
                <component :is="renderUseState(item.useState)"> </component>
              </span>
            </div>
            <div class="data-item">
              <span class="label">资产分类:</span>
              <span class="value nowrap-text" :title="item.cartegory_dictText">{{ item.cartegory_dictText }}</span>
            </div>
            <div class="data-item">
              <span class="label">资产编码:</span>
              <span class="value nowrap-text" :title="item.code">{{ item.code }}</span>
            </div>
            <div class="data-item">
              <span class="label">存放位置:</span>
              <span class="value nowrap-text" :title="item.position_dictText">{{ item.position_dictText }}</span>
            </div>
            <div class="data-item">
              <span class="label">管理部门:</span>
              <span class="value nowrap-text" :title="item.custodyDepartment_dictText">{{ item.custodyDepartment_dictText }}</span>
            </div>

            <div class="data-item">
              <span class="label">登记日期:</span>
              <span class="value nowrap-text" :title="item.createTime">{{ item.createTime }}</span>
            </div>
            <div class="data-item" v-if="item.rfid">
              <span class="label">RFID:</span>
              <span class="value nowrap-text" :title="item.rfid">{{ item.rfid }}</span>
            </div>
            <div class="data-item" v-if="item.user_dictText">
              <span class="label">使用人:</span>
              <span class="value nowrap-text" :title="item.user_dictText">{{ item.user_dictText }}</span>
            </div>
            <div class="data-item" v-if="item.user_dictText">
              <span class="label">价格:</span>
              <span class="value nowrap-text" :title="item.price">{{ item.price }}￥</span>
            </div>
          </div>
          <div class="item-footer">
            <div class="foot-left">
              <img style="height: 80px; object-fit: contain" :src="`data:image/png;base64,${item.qrCode}`" />
            </div>
            <div class="foot-center">
              <img
                style="height: 80px; object-fit: contain"
                :class="item.residualsRate ? 'ml-35' : ''"
                :src="`data:image/png;base64,${item.barCode}`"
              />
            </div>
            <div v-if="item.residualsRate" class="foot-right">
              <a-progress title="残值率" :percent="item.residualsRate" type="circle" :width="72" />
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center; padding: 20px 0" v-if="showSpin"><a-spin /></div>
    </div>
  </div>
  <div @click="() => changeShowList()" v-if="!showList"> <AssetInfoDetail :asset-id="currentAssetId" @back="changeShowList" /> </div>
</template>
<script lang="ts" setup>
  import { list } from '@/views/asset/asset-info/AssetInfo.api';
  import { renderUseState } from '@/views/asset/asset-info/AssetInfo.data';
  import { ref, watch } from 'vue';
  import AssetInfoDetail from './AssetInfoDetail.vue';
  import { useScroll } from '@vueuse/core';

  const recordsMain = ref<HTMLElement | null>(null);
  const { y, arrivedState } = useScroll(recordsMain, { throttle: 10 });
  watch(
    () => arrivedState.bottom,
    (bottomArrived) => {
      if (bottomArrived && !isMax.value) {
        pageNo.value++;
        showSpin.value = true;
        getData().finally(() => {
          showSpin.value = false;
        });
      }
    }
  );
  const showList = ref(true);
  const dataSource = ref<any[]>([]);
  const isLoading = ref(false);
  const pageNo = ref(1);
  const isMax = ref(false);
  const showSpin = ref(false);
  const getData = (clear = false) => {
    return list({ pageSize: 15, pageNo: pageNo.value, column: 'createTime', order: 'desc' }).then((res) => {
      clear && (dataSource.value = []);
      dataSource.value.push(...res.records);
      if (res.records.length < 15) {
        isMax.value = true;
        showSpin.value = false;
      }
    });
  };
  const firstGetData = () => {
    isLoading.value = true;
    pageNo.value = 1;
    isMax.value = false;
    y.value = 0;
    getData(true).finally(() => {
      isLoading.value = false;
    });
  };
  firstGetData();

  const currentAssetId = ref('');
  const cardClick = (assetId) => {
    currentAssetId.value = assetId;
    changeShowList();
  };
  const changeShowList = (data?: boolean) => {
    console.log('changeShowList', data);

    showList.value = data ?? !showList.value;
  };
</script>
<style scoped lang="less">
  .transfer-records-wrap {
    padding: 10px;
    height: calc(100vh - 98px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .transfer-records-header {
      margin-bottom: 10px;
      background-color: #fff;
      padding: 10px 12px;
      font-size: 16px;
      font-weight: bold;
    }
    .transfer-records-main {
      flex: 1;
      overflow: hidden;

      background-color: #fff;

      border: 7px solid #fff;
      &:hover {
        overflow: overlay;
      }
      .item-wrap {
        display: flex;
        flex-wrap: wrap;
        .item {
          background-color: #fff;
          height: 374px;
          width: 320px;
          word-break: break-all;
          margin: 5px;
          border: 1px solid #eef0f2;
          overflow: hidden;
          border-radius: 3px;
          cursor: pointer;
          transition: all 0.3s;
          display: flex;
          flex-direction: column;
          transition: all 0.4s;
          &:hover {
            // border-color: #eff5ff;
            box-shadow:
              0 0px 1px 0px #00000029,
              0 0px 1px #0000001f,
              0 2px 5px 2px #00000017;
          }
          .item-header {
            display: flex;
            padding: 10px 10px;
            font-size: 16px;
            font-weight: 600;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eef0f2;
            background-color: #eff5ff;
          }
          .data-wrap {
            flex: 1;
            // padding-top: 3px;
            overflow-y: hidden;
            &:hover {
              overflow-y: overlay;
            }
            .data-item {
              display: flex;
              align-items: center;
              border-bottom: 1px solid #eff5ff;
              padding: 2px 10px;
              &:nth-child(even) {
                background-color: #eff5ff66;
              }
              .label {
                margin-right: 12px;
                width: 60px;
                color: #555;
                // text-align: right;
              }
              .value {
                flex: 1;
                color: #000;
                font-weight: 500;
              }
            }
          }
          .item-footer {
            // background-color: #eff5ff;
            // padding: px 0;
            border-top: 1px solid #eff5ff;
            display: flex;
            flex-shrink: 0;
            .foot-left {
              // height: 80px;
              width: 82px;
              border: 1px solid #fff;
              border-right: 1px solid #eff5ff;
              text-align: center;
              flex-shrink: 0;
              box-sizing: border-box;
              transition: all 0.4s;
              &:hover {
                border-color: #1890ff;
              }
            }
            .foot-center {
              flex: 1;
              overflow: hidden;
              border: 1px solid #fff;
              transition: all 0.4s;
              &:hover {
                border-color: #1890ff;
              }
            }
            .foot-right {
              // height: 80px;
              width: 86px;
              border: 1px solid #fff;
              border-left: 1px solid #eff5ff;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.4s;
              &:hover {
                border-color: #1890ff;
              }
            }
          }
        }
      }
    }
  }
  .ml-35 {
    margin-left: -35px;
  }
</style>
